<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>welcome to my ESP32</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="app" style="background-color:aquamarine;position:absolute;width : 100%;height : 100%;">
    <div>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple"
                     style="color: rgb(255, 0, 200);text-align: center;font-size:larger;">向我的ESP32 发送一条留言
                </div>
            </el-col>
        </el-row>
    </div>

    <div id="appmm">

        <div id="line1">
            <el-divider></el-divider>
        </div>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="grid-content bg-purple">.</div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <el-input v-model="input1"  placeholder="请输入需要发送的消息（目前仅支持中文）"></el-input>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">.</div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="11">
                <div class="grid-content bg-purple">.</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-button type="primary" @click="cmTo" >发送</el-button>
                </div>
            </el-col>
            <el-col :span="10">
                <div class="grid-content bg-purple">.</div>
            </el-col>
        </el-row>
    </div>
</div>


</body>
</html>


<script>
    // console.log(document.getElementById('abc'));
    console.log("asdfasdfadsf");
    console.log(this.input1);
    var Main = {
        data() {
            return {
                input1: '',
            }
        },
        methods: {
            cmTo() {
                console.log(this.input1);
                axios({
                    url: '/esp32/send',
                    params: {
                        msg: this.input1
                    }
                })
                    .then(response => {
                        console.log('/a', response.data)
                        return response.data
                    }, error => {
                        console.log('错误', error.message)
                    })
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')


</script>
